<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>公共页面</title>
</head>
<body>

<!--导航栏-->
<div class="page-header navbar navbar-fixed-top" th:fragment="headnavbar">
    <div class="page-header-inner ">
        <!-- logo start -->
        <div class="page-logo">
            <a th:href="@{/index.html}">
                <img alt="" th:src="@{/assets/img/logo.png}">
                <span class="logo-default">欢迎</span> </a>
        </div>
        <!-- logo end -->
        <ul class="nav navbar-nav navbar-left in">
            <li><a href="#" class="menu-toggler sidebar-toggler"><i class="icon-menu"></i></a></li>
        </ul>

        <!--搜索框 start-->
        <form class="search-form-opened" action="#" method="GET">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search..." name="query">
                <span class="input-group-btn search-btn">
                          <a href="javascript:;" class="btn submit">
                             <i class="icon-magnifier"></i>
                           </a>
                        </span>
            </div>
        </form>
        <!--搜索框 end-->

        <!-- start mobile menu -->
        <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
            <span></span>
        </a>
        <!-- end mobile menu -->

        <!-- start header menu -->
        <div class="top-menu">
            <ul class="nav navbar-nav pull-right">


                <!-- start manage user dropdown -->
                <li class="dropdown dropdown-user">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <img alt="" class="img-circle " th:src="@{/assets/img/dp.jpg}" />
                        <span class="username username-hide-on-mobile" th:text="${session.loginUser.username}"></span>
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-default animated jello">
                        <li>
                            <a th:href="@{/emp_profile.html}">
                                <i class="icon-user"></i> 用户面板 </a>
                        </li>


                        <li class="divider"> </li>
                        <li>
                            <a th:href="@{/lock_screen.html}">
                                <i class="icon-lock"></i> 锁屏
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/logout}">
                                <i class="icon-logout"></i> 退出登录 </a>
                        </li>
                    </ul>
                </li>
                <!-- end manage user dropdown -->
                <li class="dropdown dropdown-quick-sidebar-toggler">
                    <a id="headerSettingButton" class="mdl-button mdl-js-button mdl-button--icon pull-right" data-upgraded=",MaterialButton">
                        <i class="material-icons">settings</i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!--侧边栏-->
<div class="sidemenu-container navbar-collapse collapse fixed-menu" th:fragment="sidebar">
    <div id="remove-scroll">
        <ul class="sidemenu page-header-fixed p-t-20" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
            <li class="sidebar-toggler-wrapper hide">
                <div class="sidebar-toggler">
                    <span></span>
                </div>
            </li>
            <li class="sidebar-user-panel">
                <div class="user-panel">
                    <div class="row">
                        <div class="sidebar-userpic">
                            <img th:src="@{/assets/img/man.jpg}" class="img-responsive" alt=""> </div>
                    </div>
                    <div class="profile-usertitle">
                        <div class="sidebar-userpic-name" th:text="${session.loginUser.username}"> hhh </div>
                        <div class="profile-usertitle-job" th:text="${session.roleName}" > Manager </div>
                    </div>
                    <div class="sidebar-userpic-btn">
                        <a class="tooltips" th:href="@{/user_profile.html}" data-placement="top" data-original-title="Profile">
                            <i class="material-icons">person_outline</i>
                        </a>

                        <a class="tooltips" th:href="@{/logout}" data-placement="top" data-original-title="Logout">
                            <i class="material-icons">input</i>
                        </a>
                    </div>
                </div>
            </li>
            <li class="menu-heading">
                <span>--功能菜单</span>
            </li>
            <li th:class="${open=='indexing'?'nav-item active':'nav-item'}">
                <a href="#" class="nav-link nav-toggle">
                    <i class="material-icons">dashboard</i>
                    <span class="title">主页面</span>
                    <span class="arrow"></span>
                </a>
                <ul class="sub-menu">
                    <li  th:class=" ${active=='index'?'nav-item active':'nav-item'}" >
                        <a th:href="@{/index}" class="nav-link ">
                            <span class="title">主页 </span>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="nav-item" th:class="${open=='booking'?'nav-item active':'nav-item'}">
                <a href="#" class="nav-link nav-toggle">
                    <i class="material-icons">business_center</i>
                    <span class="title">入住登记</span>
                    <span  th:class="${open=='booking'?'selected':''}"></span>
                    <span class="arrow " th:class="${open=='booking'?'arrow open':'arrow'}"></span>
                </a>
                <ul class="sub-menu">
                    <li th:class="${active=='new_booking'?'nav-item active':'nav-item'}">
                        <a th:href="@{/order/toaddOrder}" class="nav-link ">
                            <span class="title">添加订单</span>
                        </a>
                    </li>
                    <li th:class="${active=='view_booking'?'nav-item active':'nav-item'}">
                        <a th:href="@{/order/orders}" class="nav-link ">
                            <span class="title">所有记录</span>
                        </a>
                    </li>

                </ul>
            </li>

            <li class="nav-item active" th:class="${open=='room'?'nav-item active':'nav-item'}">
                <a href="#" class="nav-link nav-toggle">
                    <i class="material-icons">vpn_key</i>
                    <span class="title">客房</span>
                    <span   th:class="${open=='room'?'selected':''}"></span>
                    <span  class="arrow" th:class="${open=='room'?'arrow open':'arrow'}"></span>
                </a>
                <ul class="sub-menu">
                    <li th:class="${active=='add_room'?'nav-item active':'nav-item'}">
                        <a th:href="@{/add_room.html}" class="nav-link ">
                            <span class="title">添加客房</span>
                        </a>
                    </li>
                    <li th:class="${active=='all_rooms'?'nav-item active':'nav-item'}">
                        <a th:href="@{/rooms}" class="nav-link ">
                            <span class="title">查看客房</span>
                            <!--<span class="selected"></span>-->
                        </a>
                    </li>

                </ul>
            </li>

            <li class="nav-item" th:class="${open=='staff'?'nav-item active':'nav-item'}">
                <a href="#" class="nav-link nav-toggle">
                    <i class="material-icons">group</i>
                    <span class="title">员工</span>
                    <span  th:class="${open=='staff'?'selected':''}"></span>
                    <span class="arrow " th:class="${open=='staff'?'arrow open':'arrow'}"></span>
                </a>
                <ul class="sub-menu">
                    <li th:class="${active=='add_staff'?'nav-item active':'nav-item'}">
                        <a th:href="@{/add_staff.html}" class="nav-link ">
                            <span class="title">添加员工</span>
                        </a>
                    </li>
                    <li th:class="${active=='all_staffs'?'nav-item active':'nav-item'}">
                        <a th:href="@{/staff/staffs}" class="nav-link ">
                            <span class="title">所有员工</span>
                        </a>
                    </li>
                    <li th:class="${active=='edit_staff'?'nav-item active':'nav-item'}">
                        <a th:href="@{/edit_staff.html}" class="nav-link ">
                            <span class="title">编辑员工</span>
                        </a>
                    </li>


                </ul>
            </li>

            <li class="nav-item " th:class="${open=='user'?'nav-item active':'nav-item'}">
                <a href="#" class="nav-link nav-toggle">
                    <i class="material-icons">desktop_mac</i>
                    <span class="title">授权</span>
                    <span  th:class="${open=='user'?'selected':''}"></span>
                    <span  th:class="${open=='user'?'arrow open':'arrow'}"></span>
                </a>
                <ul class="sub-menu" >
                    <li th:class="${active=='all_users'?'nav-item active':'nav-item'}">
                        <a th:href="@{/user/showAuths}" class="nav-link ">
                            <span class="text">查看用户权限</span>
                        </a>
                    </li>
                </ul>
            </li>


        </ul>
    </div>
</div>


<!--打印导出设置-->
<div class="col-md-6 col-sm-6 col-6">
    <div class="btn-group pull-right">
        <a class="btn deepPink-bgcolor  btn-outline dropdown-toggle" data-toggle="dropdown">Tools
            <i class="fa fa-angle-down"></i>
        </a>
        <ul class="dropdown-menu pull-right">
            <li>
                <a href="javascript:;">
                    <i class="fa fa-print"></i> Print </a>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="fa fa-file-pdf-o"></i> Save as PDF </a>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="fa fa-file-excel-o"></i> Export to Excel </a>
            </li>
        </ul>
    </div>
</div>


<!-- 上边栏右边设置 -->
<div class="chat-sidebar-container" data-close-on-body-click="false" th:fragment="settingtools">
    <div class="chat-sidebar">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a href="#quick_sidebar_tab_1" class="nav-link active tab-icon" data-toggle="tab">Theme
                </a>
            </li>

            <li class="nav-item">
                <a href="#quick_sidebar_tab_3" class="nav-link tab-icon" data-toggle="tab"> Settings
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane chat-sidebar-settings in show active animated shake" role="tabpanel"
                 id="quick_sidebar_tab_1">
                <div class="slimscroll-style">
                    <div class="theme-light-dark">
                        <h6>Sidebar Theme</h6>
                        <button type="button" data-theme="white"
                                class="btn lightColor btn-outline btn-circle m-b-10 theme-button">Light Sidebar
                        </button>
                        <button type="button" data-theme="dark"
                                class="btn dark btn-outline btn-circle m-b-10 theme-button">Dark Sidebar
                        </button>
                    </div>
                    <div class="theme-light-dark">
                        <h6>Sidebar Color</h6>
                        <ul class="list-unstyled">
                            <li class="complete">
                                <div class="theme-color sidebar-theme">
                                    <a href="#" data-theme="white"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="dark"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="blue"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="indigo"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="cyan"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="green"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="red"><span class="head"></span><span
                                            class="cont"></span></a>
                                </div>
                            </li>
                        </ul>
                        <h6>Header Brand color</h6>
                        <ul class="list-unstyled">
                            <li class="theme-option">
                                <div class="theme-color logo-theme">
                                    <a href="#" data-theme="logo-white"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="logo-dark"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="logo-blue"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="logo-indigo"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="logo-cyan"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="logo-green"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="logo-red"><span class="head"></span><span
                                            class="cont"></span></a>
                                </div>
                            </li>
                        </ul>
                        <h6>Header color</h6>
                        <ul class="list-unstyled">
                            <li class="theme-option">
                                <div class="theme-color header-theme">
                                    <a href="#" data-theme="header-white"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="header-dark"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="header-blue"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="header-indigo"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="header-cyan"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="header-green"><span class="head"></span><span
                                            class="cont"></span></a>
                                    <a href="#" data-theme="header-red"><span class="head"></span><span
                                            class="cont"></span></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Start Setting Panel -->
            <div class="tab-pane chat-sidebar-settings animated slideInUp" id="quick_sidebar_tab_3">
                <div class="chat-sidebar-settings-list slimscroll-style">
                    <div class="chat-header"><h5 class="list-heading">Layout Settings</h5></div>
                    <div class="chatpane inner-content ">
                        <div class="settings-list">
                            <div class="setting-item">
                                <div class="setting-text">Sidebar Position</div>
                                <div class="setting-set">
                                    <select class="sidebar-pos-option form-control input-inline input-sm input-small ">
                                        <option value="left" selected="selected">Left</option>
                                        <option value="right">Right</option>
                                    </select>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Header</div>
                                <div class="setting-set">
                                    <select class="page-header-option form-control input-inline input-sm input-small ">
                                        <option value="fixed" selected="selected">Fixed</option>
                                        <option value="default">Default</option>
                                    </select>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Sidebar Menu</div>
                                <div class="setting-set">
                                    <select class="sidebar-menu-option form-control input-inline input-sm input-small ">
                                        <option value="accordion" selected="selected">Accordion</option>
                                        <option value="hover">Hover</option>
                                    </select>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Footer</div>
                                <div class="setting-set">
                                    <select class="page-footer-option form-control input-inline input-sm input-small ">
                                        <option value="fixed">Fixed</option>
                                        <option value="default" selected="selected">Default</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="chat-header"><h5 class="list-heading">Account Settings</h5></div>
                        <div class="settings-list">
                            <div class="setting-item">
                                <div class="setting-text">Notifications</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                               for="switch-1">
                                            <input type="checkbox" id="switch-1"
                                                   class="mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Show Online</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                               for="switch-7">
                                            <input type="checkbox" id="switch-7"
                                                   class="mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Status</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                               for="switch-2">
                                            <input type="checkbox" id="switch-2"
                                                   class="mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">2 Steps Verification</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                               for="switch-3">
                                            <input type="checkbox" id="switch-3"
                                                   class="mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chat-header"><h5 class="list-heading">General Settings</h5></div>
                        <div class="settings-list">
                            <div class="setting-item">
                                <div class="setting-text">Location</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                               for="switch-4">
                                            <input type="checkbox" id="switch-4"
                                                   class="mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Save Histry</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                               for="switch-5">
                                            <input type="checkbox" id="switch-5"
                                                   class="mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Auto Updates</div>
                                <div class="setting-set">
                                    <div class="switch">
                                        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
                                               for="switch-6">
                                            <input type="checkbox" id="switch-6"
                                                   class="mdl-switch__input" checked>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end chat sidebar -->



<!-- 页脚-->
<div class="page-footer" th:fragment="footer">
    <div class="page-footer-inner"> 2020 &copy; Spice Hotel Template By
        <a href="mailto:1159395895@qq.com" target="_top" class="makerCss">xiaye </a>
    </div>
    <div class="scroll-to-top">
        <i class="icon-arrow-up"></i>
    </div>
</div>
<!-- end footer -->


</body>
</html>